<template>
  <v-layout title="修改/添加">

    <el-row type="flex" justify="center">
      <el-col :lg="12" :md="12" :sm="28" :xs="24">
        <v-form
          :form-title="formTitle"
          :form-data="formData"
          label-width="140px"
          @multiChange="multiChange"
        >
          <template slot="uploadImg" slot-scope="scope">
            <el-form-item label="公司logo">
              <el-upload
                :show-file-list="false"
                :auto-upload="true"
                :on-change="myUpload"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                class="avatar-uploader"
                action="action">
                <img v-if="formData.logo" :src="formData.logo" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"/>
              </el-upload>
            </el-form-item>
          </template>
        </v-form>

        <el-row type="flex" justify="end">
          <el-button type="primary" size="mini" @click="reset">撤销修改</el-button>
          <el-button type="primary" size="mini" @click="submit">确定</el-button>
        </el-row>
      </el-col>
    </el-row>
  </v-layout>
</template>

<script>
export default {
  data() {
    return {
      id: 1,
      editTitle: [
        {
          cn: 'id',
          en: 'id',
          disabled: true
        },
        {
          cn: '名称',
          en: 'name'
        },
        {
          cn: '公司logo',
          en: 'logo',
          type: 'uploadImg'
        },
        {
          cn: '面板展示字段',
          en: 'show_fields',
          type: 'multi-select',
          list: [
            {
              label: '是否预订',
              value: '1'
            },
            {
              label: '是否开发票',
              value: '2'
            },
            {
              label: '备注',
              value: '3'
            },
            {
              label: '通知谁',
              value: '4'
            },
            {
              label: '收款银行',
              value: '5'
            },
            {
              label: '采购成本',
              value: '6'
            },
            {
              label: '发票单号',
              value: '7'
            },
            {
              label: '广告编辑责任人',
              value: '8'
            },
            {
              label: '广告设计责任人',
              value: '9'
            }
          ]
        },
        {
          cn: '创建时间',
          en: 'create_time',
          disabled: true
        },
        {
          cn: '更新时间',
          en: 'update_time',
          disabled: true
        }
      ],
      createTitle: [
        {
          cn: '名称',
          en: 'name'
        },
        {
          cn: '公司logo',
          en: 'logo',
          type: 'uploadImg'
        },
        {
          cn: '面板展示字段',
          en: 'show_note',
          type: 'multi-select',
          list: [
            {
              label: '是否预订',
              value: '1'
            },
            {
              label: '是否开发票',
              value: '2'
            },
            {
              label: '备注',
              value: '3'
            },
            {
              label: '通知谁',
              value: '4'
            },
            {
              label: '收款银行',
              value: '5'
            },
            {
              label: '采购成本',
              value: '6'
            },
            {
              label: '发票单号',
              value: '7'
            },
            {
              label: '广告编辑责任人',
              value: '8'
            },
            {
              label: '广告设计责任人',
              value: '9'
            }
          ]
        }
      ],
      formData: {}
    }
  },
  computed: {
    formTitle() {
      if (this.$route.query.id) {
        return this.editTitle
      } else {
        return this.createTitle
      }
    }
  },
  created() {
    this.id = this.$route.query.id
    const details = this.$route.params.details
    if (details) {
      localStorage.setItem('details', JSON.stringify(details))
    }
    this.formData = localStorage.getItem('details') ? JSON.parse(localStorage.getItem('details')) : {}
  },
  methods: {

    submit() {
      const data = this.formData
      this.$post('action/Companies/save', data)
        .then(res => {
          this.$message({
            message: res.msg,
            type: 'success'
          })
        })
    },
    reset() {
      this.formData = this.id ? JSON.parse(localStorage.getItem('details')) : {}
    },
    multiChange(val) {
      console.log(val)
    },

    myUpload(e) {
      this.formData.logo = e.url
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isLt2M
    }
  }
}
</script>

<style scoped>

</style>
